<template>
  <div class="app-container home">

    <el-row justify="space-between" class="row">
      <el-col :span="5">
        <div class="point-card" style="background: #8fbc8f">
          <div class="point-card-lf">
            <svg-icon icon-class="chart" class="p-card-lf_icon"></svg-icon>
          </div>
          <div class="point-card-rt">
            <div class="p-card-rt_val">{{ statisticsData.todayTurnover }}</div>
            <div class="p-card-rt_title">今日交易额（元）</div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="point-card" style="background: #00a896">
          <div class="point-card-lf">
            <svg-icon icon-class="user" class="p-card-lf_icon"></svg-icon>
          </div>
          <div class="point-card-rt">
            <div class="p-card-rt_val">
              {{ statisticsData.todayMemberCount }}
            </div>
            <div class="p-card-rt_title">今日用户数量</div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="point-card" style="background: #eb9c64">
          <div class="point-card-lf">
            <svg-icon icon-class="money" class="p-card-lf_icon"></svg-icon>
          </div>
          <div class="point-card-rt">
            <div class="p-card-rt_val">{{ statisticsData.totalTurnover }}</div>
            <div class="p-card-rt_title">营业总额（元）</div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="point-card" style="background: #ff8789">
          <div class="point-card-lf">
            <svg-icon icon-class="shopping" class="p-card-lf_icon"></svg-icon>
          </div>
          <div class="point-card-rt">
            <div class="p-card-rt_val">
              {{ statisticsData.totalOrderCount }}
            </div>
            <div class="p-card-rt_title">订单成交量</div>
          </div>
        </div>
      </el-col>
    </el-row>


    <div class="card-box">
      <el-row class="row">
        <el-col :span="4">
          <el-date-picker
              v-model="queryParams.year"
              type="year"
              placeholder="选择日期"
              value-format="YYYY"
              @change="loadData"
          ></el-date-picker>
        </el-col>
      </el-row>
      <div class="chart" ref="chartRef"></div>
    </div>

  </div>
</template>

<script setup name="Index">
import * as echarts from "echarts";
import { nextTick, onBeforeMount, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { getStatistics } from "@/api/mall/server/statistics/statistics";
const chartRef = ref(null);
let chartOption = {
  title: {
    text: "月度订单交易统计",
    left: "center",
  },
  // 工具栏
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      snap: true,
    },
  },
  legend: {
    data: ["营业额", "营业额增值"],
    left: "right",
  },
  // 图
  grid: {
    left: "5%",
    right: "5%",
    bottom: "6%",
    top: "15%",
  },
  xAxis: {
    name: "时间/月",
  },
  yAxis: {
    name: "营业额/元",
  },
  series: [
    {
      type: "bar",
      barWidth: "10%",
      name: "营业额",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#8bd46e",
            },
            {
              offset: 1,
              color: "#09bcb7",
            },
          ]),
          barBorderRadius: 11,
        },
      },
    },
    {
      name: "营业额增值",
      type: "line",
      symbol: "circle",
      symbolSize: 5,
      smooth: true,
      animationDuration: 1000,
      animationEasing: "cubicInOut",
      color: "#61bc84",
      // areaStyle: {
      //   color: "#61bc84",
      // },
    },
  ],
};
// 获取统计数据
const loading = ref(false);
const queryParams = ref({
  year: new Date().getFullYear(),
});
const statisticsData = reactive({
  totalTurnover: 0,
  totalOrderCount: 0,
  todayTurnover: 0,
  todayMemberCount: 0,
  monthTurnovers: [],
});

const { monthTurnovers } = toRefs(statisticsData);
const getStatisticsData = async () => {
  const { data } = await getStatistics(queryParams.value);
  statisticsData.monthTurnovers = data.monthTurnovers;
  statisticsData.totalTurnover = data.totalTurnover == null ? 0 : data.totalTurnover;
  statisticsData.totalOrderCount =
    data.totalOrderCount == null ? 0 : data.totalOrderCount;
  statisticsData.todayTurnover = data.todayTurnover == null ? 0 : data.todayTurnover;
  statisticsData.todayMemberCount =
    data.todayMemberCount == null ? 0 : data.todayMemberCount;
};

// 初始化图表
// echart实例不能用响应式
const chart = shallowRef(null);
const initChart = () => {
  if (chart.value == null) {
    chart.value = echarts.init(chartRef.value);
  }
  let list = formatChartData();
  chartOption.xAxis.data = list.map((item) => item.month);
  chartOption.series[0].data = list.map((item) => item.turnover);
  chartOption.series[1].data = list.map((item, i) => {
    if (i == 0) {
      return 0;
    }
    return item.turnover - list[i - 1].turnover;
  });
  chart.value.setOption(chartOption);
};

const loadData = (val) => {
  console.log(val);
  getStatisticsData().then((res) => {
    nextTick(() => {
      initChart();
    });
  });
};
// 模拟实时更新数据
const timer = ref(null);

// 填充数据,空的数据填充0
const formatChartData = () => {
  const list = [];

  if (monthTurnovers.value.length == 12) {
    return monthTurnovers.value;
  }
  // 生成月份
  for (let i = 1; i <= 12; i++) {
    list.push({
      month:
        i < 10 ? `${queryParams.value.year}-0${i}` : `${queryParams.value.year}-${i}`,
      turnover: 0,
    });
  }

  list.forEach((item, i) => {
    let index = monthTurnovers.value.findIndex((e) => e.month == item.month);
    if (index > -1) {
      list[i].turnover = monthTurnovers.value[index].turnover;
    }
  });

  return list;
};

onMounted(() => {
  loadData();
  timer.value = setInterval(() => {
    loadData();
  }, 5000);
});

onUnmounted(() => {
  timer.value && clearInterval(timer.value);
  chart.value && chart.value.dispose();
});
</script>

<style scoped lang="scss">
.row {
  margin-bottom: 10px;
}
.card-box {
  border: 1px solid #e4e7ed;
  padding: 30px;
  margin-top: 20px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
.chart {
  width: 100%;
  height: 500px;

}
.point-card {
  background: #61bc84;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;

  .point-card-lf {
    padding: 15px;

    .p-card-lf_icon {
      font-size: 50px;
      color: #fff;
    }
  }

  .point-card-rt {
    color: #fff;

    .p-card-rt_val {
      font-size: 24px;
    }

    .p-card-rt_title {
      font-size: 14px;
      margin-top: 5px;
    }
  }
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
